<template>
    <div>
        <form>
            <input type="text" v-model="state2.stu.id">
            <input type="text" v-model="state2.stu.name">
            <input type="text" v-model="state2.stu.age">
            <input type="submit" @click="addStu">
        </form>
        <ul>
            <li v-for="(stu,index) in this.state.stus"
                :key="stu.id"
                @click="remStu(index)">
                {{stu.name}}---{{stu.age}}
            </li>
        </ul>
    </div>
</template>

<script>
    import {ref} from 'vue';
    import {reactive} from 'vue';
    import useAddStu from "./add";
    import useRemoveStu from "./rem";
    export default {
        name: 'App',
        //比钩子beforeCreate()还要早
        setup(){
            //ref函数注意点,
            //ref函数只能监听简单类型,不能监听数组集合
            let{state,remStu}=useRemoveStu();
            let{state2,addStu}=useAddStu(state);

            return{state,remStu,state2,addStu}
        }
    }
    //模块化 数据和业务逻辑不分散
    /*function useRemoveStu() {
        let state=reactive({
            stus: [
                {id: 1, name: 'zs', age: 10},
                {id: 2, name: 'ls', age: 20},
                {id: 3, name: 'ws', age: 30},
                {id: 4, name: 'qs', age: 40},
            ],
        })
        function remStu(index){
            state.stus = state.stus.filter((stu, idx) => idx != index)
        }
        return{state,remStu}
    }
    function useAddStu(state) {
        let state2=reactive({
            stu: {
                id: '',
                name: '',
                age: ''
            }
        });
        function addStu(e) {
            e.preventDefault();
            console.log(state2.stu)
            const stu = Object.assign({}, state2.stu)
            state.stus.push(stu)
            state2.stu.id = ''
            state2.stu.name = ''
            state2.stu.age = ''
        }
        return{state2,addStu}
    }*/
</script>

<style>

</style>
